<%--
  Created by IntelliJ IDEA.
  User: Juan
  Date: 9/11/12
  Time: 23:28
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name='layout' content='main'/>
    <title>Perfil Invitado</title>
    <r:script>
        jQuery(function () {
            jQuery("#slider").slider({
                range:"max",
                min:1,
                max:10,
                value:7,
                slide:function (event, ui) {
                    jQuery("#puntaje").val(ui.value);
                }
            });
            jQuery("#puntaje").val(jQuery("#slider").slider("value"));
        });
    </r:script>
    <style type="text/css">
    #slider {
        margin-top: 10px;
    }

    #slider .ui-slider-range {
        background: #729fcf;
    }

    #slider .ui-slider-handle {
        border-color: #729fcf;
    }
    </style>
</head>

<body>
<br>

<div align="center">
    <table cellspacing="0" width="800px" align="center">
        <tr>
            <td align="center">
                <g:set var="imageName" value="${"imagen" + fotoId + ".jpg"}"/>
                <img src="${createLinkTo(dir: 'images/training', file: imageName)}" width="160px"
                     height="180px" alt="Pepito"/>
                <br>



                <g:form action="puntuar">
                    <p style="margin-top: 5px;">
                        <label style="float: left;" for="puntaje">Puntaje:</label>
                        <input type="text" name="puntaje" id="puntaje"
                               style="border: 0; color: #729fcf; font-weight: bold;" value=""/>
                    </p>

                    <div id="slider"></div>
                    <input type="hidden" name="fotoId" value="${fotoId}"/>
                    <br>
                    <g:submitButton name="puntuar" value="Puntuar" class="button"/>
                </g:form>
            </td>
        </tr>
    </table>
</div>
<br>

<div align="center">
    <hr noshade width="90%" align="center">
</div>

<br>

<div align="center">
    <table cellspacing="0" border="1" width="800">
        <tr>
            <th colspan="1" bgcolor="gray" style="color: #ffffff;text-align: left">
                Personas recomendadas
            </th>
        </tr>
        <g:each in="${personasRecomendadas}" var="persona">
            <tr>
                <td width="100px" align="left">
                    <b>
                        <a href="${createLink(controller: 'perfilPublico', action: 'perfilPublicoUsuario', id: persona?.id)}"
                           style="color: #000000">
                            ${fieldValue(bean: persona, field: "apellido")} ${fieldValue(bean: persona, field: "nombre")}
                        </a>
                    </b>
                </td>
            </tr>
        </g:each>
    </table>
</div>
<br>

<div align="center">
    <hr noshade width="90%" align="center">
</div>
<br>

<div align="center">
    <g:link controller="busqueda" action="index">
        <input type="submit" class="button" value="Buscar Personas">
    </g:link>
</div>

</body>
</html>